<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <!--xmlns:th="http://www.thymeleaf.org"-->

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;
    }
</style>

<body>
<div id="app">
    <div id="tb" v-show="show1">
    <el-row class="demo-autocomplete" style=";">
        <el-col :span="6">
            客户姓名:
            <el-autocomplete
                class="inline-input"
                v-model="conditions.name"
                size="small"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="true"
                @select="handleSelect">
        </el-autocomplete></el-col>
        <el-col :span="6">
            手机号码：
            <el-autocomplete
                    class="inline-input"
                    v-model="conditions.telephone"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="true"
                    @select="handleSelect">
            </el-autocomplete>
        </el-col>

        <el-col :span="6"> 身份证号:
            <el-autocomplete
                    class="inline-input"
                    v-model="conditions.cardId"
                    size="small"
                    placeholder="请输入内容"
                    :trigger-on-focus="true"
                    >
            </el-autocomplete>
        </el-col>

        <el-col :span="6">
            客户备注：
            <el-autocomplete
                    class="inline-input"
                    v-model="conditions.remark"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="true"
                    @select="handleSelect">
            </el-autocomplete>
           </el-col>
        </el-row>
        <br>
        <el-row>
        <el-col :span="6">  渠道名称:
            <el-autocomplete
                    class="inline-input"
                    v-model="conditions.channel"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="true"
                    @select="handleSelect">
            </el-autocomplete>
        </el-col>
        <el-col :span="6">
            贷款状态:
            <el-select v-model="conditions.value_01" placeholder="全部"   size="small">
                <el-option
                        v-for="item in options_01"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-col>


       <el-col :span="6">
           客户状态:
           <el-select v-model="conditions.value_02" placeholder="全部"  size="small">
               <el-option
                       v-for="item in options_02"
                       :key="item.value"
                       :label="item.label"

                       :value="item.value">
               </el-option>
           </el-select>
       </el-col>
        <el-col :span="6">
            注册时间：
            <el-input
                    placeholder="请选择日期"
                    suffix-icon="el-icon-date"
                    type="time"
                     style="width: 195px;"
                     size="small"
                    v-model="conditions.time">
            </el-input>

        </el-col>
    </el-row>
    <br/><br/>
   <el-row>
        <el-col  :span="12"></el-col>
        <el-col  :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="find()" >查询</el-button>
            <el-button type="primary" size="small" @click="upload()" >导出<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-col>
    </el-row>
    <br/><br/>
    <!--table 模板  ：data 绑定了数据 tableData-->
    <el-row>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;height: 700px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    type="index"
                    label="序号"
                    width="50"
                    :index='(index)=>{return (index+1) + (this.currentPage-1)*this.pageSize}'>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="电话号码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="identityNumber"
                    label="身份证号码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="registerTime"
                    label="注册时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="lastVisitTime"
                    label="上次访问时间"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="ditchAllname"
                    label="渠道"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="备注 "
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="loanStatus"
                    label="贷款状态 "
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="customerStatus"
                    label="客户状态 "
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="id"
                    width="50"
                    v-if= false>
            </el-table-column>
            <el-table-column

                    label="操作"
                    width="230"  >

                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--Element分頁插件 有待改进-->
      </template>
    </el-row>
        <br><br>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 30, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="currentTotal"
                style="padding-left:550px;" >

        </el-pagination>
    </el-row>

   </div>
    <div id="detail" v-if="show2">
        <el-row style="background-color: silver;height: 50px;"><h4>客户信息</h4></el-row>
        <br>
                <el-row class="demo-autocomplete" style=";">
                    <el-row>
                        <el-col :span="8">
                            客户姓名：<span>{{consumer.name}}</span>
                        </el-col>
                        <el-col :span="8">
                            手机号码：<span>{{consumer.telephone}}</span>
                        </el-col>
                        <el-col :span="8">
                            客户身份证号：<span>{{consumer.identityNumber}}</span>
                        </el-col>
                    </el-row>
                    <br>

                    <el-row>
                        <el-col :span="8">
                            客户贷款状态：<span>{{consumer.loanStatus}}</span>
                        </el-col>
                        <el-col :span="8">
                            累计放款：<span>{{consumer.cumulativeLoan}}</span>
                        </el-col>
                        <el-col :span="8">
                            客户备注：<span>{{consumer.remarks}}</span>
                        </el-col>

                    </el-row>
                    <br>
                </el-row>

                <el-row class="demo-autocomplete" style=";">
                    <el-row><h4>个人信息</h4></el-row>
                    <div style="width:100%;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
                     <br>
                    <el-row>
                        <el-col :span="8">
                            电子邮箱：<span>{{consumer.email}}</span>
                        </el-col>
                        <el-col :span="8">
                            名族：<span>{{consumer.nation}}</span>
                        </el-col>
                        <el-col :span="8">
                            学历：<span>{{consumer.education}}</span>
                        </el-col>
                    </el-row>
                    <br>

                    <el-row>
                        <el-col :span="8">
                            移动电话：<span>{{consumer.telephone}}</span>
                        </el-col>
                        <el-col :span="8">
                            婚姻状况：<span>{{consumer. maritalStatus}}</span>
                        </el-col>
                        <el-col :span="8">
                            健康状况：<span>{{consumer.healthStatus}}</span>
                        </el-col>
                    </el-row>
                    <br>


                <el-row>
                    <el-col :span="8">
                        户口所在地地区：<span>{{consumer.areaOfAccount}}</span>
                    </el-col>
                    <el-col :span="8">
                        户口所在地详细地址：<span>{{consumer.detailedAccountAddress}}</span>
                    </el-col>
                    <el-col :span="8">
                        户口类型：<span>{{consumer.accountType}}</span>
                    </el-col>
                </el-row>
                    <br>

                <el-row>
                    <el-col :span="8">
                        住址地址地区：<span>{{consumer.currentLivingArea}}</span>
                    </el-col>
                    <el-col :span="8">
                        住址地址详细地址：<span>{{consumer.detailedLivingAddress}}</span>
                    </el-col>
                    <el-col :span="8">
                        入住时间：<span>{{consumer.checkInTime}}</span>
                    </el-col>
                </el-row>
                    <br>
                </el-row>


                <el-row>
                    <el-row><h4>身份证正面照</h4></el-row>
                    <div style="width:100%;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
                    <br>
                    <el-row>
                        <div style="height: 200px;width: 200px;background-color: silver">
                            <img :src="consumer.frontPhotoPath" width="200px" height="100px">
                        </div>

                    </el-row>
                </el-row>
                 <br>

                <el-row>
                    <el-row> <h4>身份证反面照</h4></el-row>
                    <div style="width:100%;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
                    <br>
                    <el-row>
                        <div style="height: 200px;width: 200px;background-color: silver">
                            <img :src="consumer.reversePhotoPath"  width="200px" height="100px">
                        </div>

                    </el-row>
                </el-row>
                 <br>

                <el-row>
                    <el-row> <h4>身份证手持照片</h4></el-row>
                    <div style="width:100%;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
                    <br>
                    <el-row>
                        <div style="height: 200px;width: 200px;background-color: silver">
                            <img :src="consumer.handheldPhotoPath"  width="200px" height="100px">
                        </div>

                    </el-row>
                </el-row>


             <br><br>
             <el-row>
                <el-col :span="12">
                    <el-button type="warning" @click="dialogVisible1 = true" style="left: 20px;">拉黑</el-button>
                </el-col>
                <el-dialog
                        title="拉黑"
                        :visible.sync="dialogVisible1"
                        width="30%">
                    <span>确认拉黑该客户</span>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="cancelFri()">确 定</el-button>
              </span>
                </el-dialog>
                <el-col :span="12">
                    <el-button type="success" @click="dialogVisible2 = true" style="right: 20px;">备注</el-button>
                </el-col>
                <el-dialog title="客户备注" :visible.sync="dialogVisible2">
                    <div>
                        <el-input type="textarea" v-model="desc"></el-input>
                    </div>
                    <div slot="footer" class="dialog-footer" >

                        <el-button type="primary" @click="saveMark()">确 定</el-button>
                    </div>
                </el-dialog>
            </el-row>

    </div>

  </div>
</body>


<script type="text/javascript" >

   let  Cuid ="";
    new Vue({
        el: "#app",
        data: {
                show1:true,
                show2:false,
                currentPage: 1,
                pageSize: 30,
                currentTotal: 0,
                tableData: [
                    {    id: 1,
                        name:"张三",
                        telephone:"14567892828",
                        identityNumber:"567890009",
                        registerTime:"2019-05-13",
                        lastVisitTime:"2019-09-13",
                        channel:"支付宝",
                        remarks:"vip客户",
                        loanStatus:"未贷款",
                        customerStatus:"未申请"
                    },
                    {}],//  datas数据 中的数组goods
                restaurants: [],
                conditions:{
                    name: '',
                    telephone : '',
                    cardId :'',
                    remark :'',
                    channel:'',
                    value_01: '',
                    value_02: '',
                    joinDate:''
                },

                options_01: [{
                    value: '1',
                    label: '未贷款'
                }, {
                    value: '2',
                    label: '已贷款'
                }],

                options_02: [{
                    value: '1',
                    label: '已申请'
                }, {
                    value: '2',
                    label: '未申请'
                }],
            //*================*/
            dialogVisible1:false,
            dialogVisible2: false,
            consumer:{
                name:"",
                telephone:"",
                identityNumber:"",
                loanStatus:"",
                cumulativeLoan:"" ,
                remarks:"",
                email:"",
                nation:"",
                education:"",
                maritalStatus:"",
                healthStatus:"",
                areaOfAccount:"",
                detailedAccountAddress:"",
                accountType:"",
                currentLivingArea:"",
                detailedLivingAddress:'',
                checkInTime:"",
                frontPhotoPath:"",
                reversePhotoPath:"",
                handheldPhotoPath:"",
            },
            desc:"",

        },
        mounted() {
            this.restaurants = this.loadAll();
            axios.get("customer/all").then(res=>{
                if(res.data.code==200){
                    console.log(res.data.data);
                    console.info(res.data.data.length);
                    this.tableData=res.data.data;
                    this.currentTotal= res.data.data.length-1;

                }
            });
        },
        methods: {

            queryParams: function (params1) {

                //向后端提交数据的入口
               var params1 = {
                    limit: this.pageSize,//每页显示数量
                    //offset: params.offset,//SQL语句起始索引
                    pageNum: this.currentPage,
                   /* sort: params.sort,//排序的列
                    sortOrder: params.order,//排序规则*/
                    //下面定义更多的参数

                    name: this.conditions.name,
                    telephone:this.conditions.telephone,
                    identityNumber: this.conditions.cardId,
                    ditchAllname:this.conditions.dicthName,
                    loanStatus:this.conditions.value_01,
                    applyStatus:this.conditions.value_02,
                    remarks:this.conditions.remark,
                    registerTime:this.conditions.joinDate,
                };
                console.info(params1);
                return params1;
            },



            handleSizeChange(val) {
                this.pageSize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
            },

            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "阳阳麻辣烫", "address": "天山西路389号"},
                    {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.info("pagesize")
                console.log(item);
            },
            find(){
                let params = new URLSearchParams();


              /*  params.append("limit", this.pageSize);
                params.append("pageNum", this.currentPage);*/
                params.append("name", this.conditions.name);
                params.append("telephone", this.conditions.telephone);
                params.append("identityNumber", this.conditions.cardId);
                params.append("ditchAllname", this.conditions.dicthName);
                params.append("loanStatus", this.conditions.value_01+0);
                params.append("applyStatus", this.conditions.value_02+0);
                params.append("remarks", this.conditions.remark);
                params.append("registerTime", this.joinDate);

                axios.get("customer/page",{params: {
                    limit: this.pageSize+0,//每页显示数量
                    //offset: params.offset,//SQL语句起始索引
                    pageNum: this.currentPage+0,
                    name: this.conditions.name,
                    telephone:this.conditions.telephone,
                    identityNumber: this.conditions.cardId,
                    ditchAllname:this.conditions.dicthName,
                    loanStatus:this.conditions.value_01+0,
                    applyStatus:this.conditions.value_02+0,
                    remarks:this.conditions.remark,
                   /* registerTime:this.conditions.registerTime*/}}).then(res=>{
                    console.info(res)
                    if (res.status==200){
                        this.tableData=res.data.rows;
                        console.info(this.tableData);
                        this.currentTotal=  res.data.total;
                        console.info(this.currentTotal);
                    }

                });

            },
            upload(){

            },

            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },
            //详情
            handleClick(line) {
                console.info(line.id);
                Cuid=line.id;
                this.show1=! this.show1;
                this.show2=! this.show2;
                axios.get("customer/one?cid="+line.id).then(res=>{

                    if (res.data.code==200){

                        let datas=res.data.data;
                        this.consumer.name=datas.name;
                        this.consumer.telephone= datas.telephone;
                        this.consumer.identityNumber=datas.identityNumber;
                        this.consumer.loanStatus=datas.loanStatus;
                        this.consumer.cumulativeLoan=datas.cumulativeLoan;
                        this.consumer.remarks=datas.remarks;
                        this.consumer.email=datas.email;
                        this.consumer.nation=datas.nation;
                        this.consumer.education=datas.education;
                        this.consumer.maritalStatus=datas.maritalStatus;
                        this.consumer.healthStatus=datas.healthStatus;
                        this.consumer.areaOfAccount=datas.areaOfAccount;
                        this.consumer.detailedAccountAddress=datas.detailedAccountAddress;
                        this.consumer.accountType=datas.accountType;
                        this.consumer.currentLivingArea=datas.currentLivingArea;
                        this.consumer.detailedLivingAddress=datas.detailedLivingAddress;
                        this.consumer.checkInTime=datas.checkInTime;
                        this.consumer.frontPhotoPath=datas.frontPhotoPath
                        this.consumer.reversePhotoPath=datas.reversePhotoPath;
                        this.consumer.handheldPhotoPath=datas.handheldPhotoPath;

                    }
                });

              //  location.href=("customer/one?cid="+line.id)
            },

            cancelFri(){
                this.dialogVisible1 = false;

                axios.put("customer/cancelFri?cid="+Cuid).then(res=>{

                });
            },
            saveMark(){
                this.dialogVisible2 = false;
                var params = new URLSearchParams();
                params.append("id", Cuid);
                params.append("remarks", this.desc);

                axios.put("customer/updateMark",params).then(res=>{
                    if(res.data.status==200){
                        console.info(res.data.data)
                    }
                });

            },

        },

    });

    //分页还没写


</script>
</html>